<template>
  <div>
    <el-card style="margin-left: 10px;margin-top: 2px;height: 80px">
      <el-form :inline="true" :model="user" ref="form">
        <el-form-item>
          <el-input size="small" v-model=" user.username  " placeholder="请输入内容(用户名/昵称)"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchInfo">查询</el-button>
          <el-button type="primary" @click="resetFrom('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-left: 10px;margin-top: 2px">
      <el-button type="primary" @click="deleteBatch">批量删除</el-button>
      <el-button type="primary" @click="addUser">添加用户</el-button>
    </el-card>
    <template>
      <div>
        <el-dialog :rules="rules" :title="title" :visible.sync="openUser" :close-on-click-modal="false" width="30%">

          <el-form ref="elForm" :model="userForm" size="medium" label-width="100px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userForm.username" placeholder="用户账号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="name">
              <el-input v-model="userForm.name" placeholder="用户昵称" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="userForm.phone" placeholder="电话" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="userForm.email" placeholder="邮箱" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="User">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>

    <el-card style="margin-left: 10px;margin-top: 2px">
      <el-table
        :data="UserInfo"
        style="width: 100%"
        ref="multipleTable"
        border
        @selection-change="handleSelectionChange"
        row-key="id"
      >

        <el-table-column
          type="selection"
          width="55"
          reserve-selection
        />

        <el-table-column
          prop="id"
          label="序号"

        >
        </el-table-column>
        <el-table-column
          prop="avatar"
          label="头像"

        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户账号"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户昵称">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="role"
          label="权限">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="deleteUser(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <template>
        <div style="display:flex; align-items: center" class="block" align="center">
          <el-pagination
            @size-change="handleSizeChange"
            :page-sizes="[1, 2, 3]"
            @current-change="handleCurrentChange"
            :page-size="user.pageSize"
            :current-page="user.pageNum"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
          <el-button size="small" type="primary" plain @click="toPage">跳转</el-button>
        </div>
      </template>
    </el-card>

  </div>
</template>

<script>
import {addUser, deleteBatch, deleteUser, findAll, updateUser} from '@/api/project/usermanager'

export default {
  name: "userINFO",
  data() {
    return {
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入用户昵称', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入电话', trigger: 'change'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'change'}
        ],
      },
      openUser: false,
      title: "",
      userForm: {},
      total: 0,
      user: {
        username: null,
        pageSize: 3,
        pageNum: 1,
      },
      UserInfo: [],
      multipleSelection: []
    }
  },
  methods: {

    findAll() {
      findAll(this.user).then(res => {
        if (res.code === 20000) {
          this.UserInfo = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error(ret.message || '获取数据失败');
        }
      })
        .catch(error => {
          this.$message.error('请求失败: ' + error.message);
          console.error(error);
        });
    },
    deleteUser(index, row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', {

        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser({id: row.id}).then(res => {
          if (res.code === 20000) {
            this.$message.success('删除成功');
            this.findAll()
          } else {
            this.$message.error(res.message || '删除失败');
          }
        })
          .catch(error => {
            this.$message.error('请求失败: ' + error.message);
            console.error(error);
          });
      })
        .catch(() => {
          this.$message.info('已取消删除');
        });
    },

    searchInfo() {
      this.findAll()
    }
    ,
    resetFrom(formName) {
      this.$refs[formName].resetFields();
      this.user.username = null
      this.findAll()
    }
    ,
    deleteBatch() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请至少选择一条记录')
        return
      }
      this.$confirm('此操作将永久删除[' + this.multipleSelection + '], 是否继续?', '删除用户!', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return deleteBatch(this.multipleSelection)
      }).then(res => {
        if (res.code === 20000) {
          this.$message.success('删除成功');
          this.$refs.multipleTable.clearSelection();
          this.findAll()
        }
      })
        .catch(() => {
          this.$message.info('已取消删除');
        });

    }
    ,
    User() {
      if (this.title === "添加用户") {
        addUser(this.userForm).then(res => {
          if (res.code === 20000) {
            this.$message.success('添加成功');
            this.openUser = false
            this.findAll()
          } else {
            this.$message.error(res.message || '添加失败');
          }
        })
          .catch(error => {
            this.$message.error('请求失败: ' + error.message);
            console.error(error);
          });
      } else {
        this.userForm.userId = this.UserInfo[0].userId
        updateUser(this.userForm).then(res => {
          if (res.code === 20000) {
            this.$message.success('修改成功');
            this.openUser = false
            this.findAll()
          } else {
            this.$message.error(res.message || '修改失败');
          }
        })
          .catch(error => {
            this.$message.error('请求失败: ' + error.message);
            console.error(error);
          })
      }
    }
    ,
    addUser() {
      this.title = "添加用户"
      this.openUser = true
      this.userForm = {}
    }
    ,
    handleClick(index, row) {
      this.title = "编辑用户"
      this.userForm = JSON.parse(JSON.stringify(row));
      this.openUser = true
    }
    ,
    handleSelectionChange(val) {
      this.multipleSelection = []
      for (const index in val) {
        this.multipleSelection.push(val[index].id)// 取出对象id存储到数组
      }
    }
    ,
    handleSizeChange(val) {
      this.user.pageSize = val
      this.findAll()
    }
    ,
    handleCurrentChange(val) {
      this.user.pageNum = val
      this.findAll()
    }
    ,
    toPage() {

      this.user.pageNum = this.$refs.toPage.value
    }
    ,
    close() {
      this.openUser = false

    },
  },

  created() {
    this.findAll()
  }

}
</script>


<style scoped lang="css">

</style>
